<template>
  <div id="AkapelaRecomm">
    <div class="homeModule-title">
      <p>合辑推荐</p>
      <div>
        <p>更多</p>
        <van-icon name="arrow" />
      </div>
    </div>
    <div class="AkapelaRecomm-content">
      <!-- 因为promise异步的原因
            传过来的数据 第一层可以获取到 第二层则在渲染时来不及
            所以这里加了个v-if判断 来解决这个异步问题
         -->
      <img v-if="AkapelaRecomm.images" :src="AkapelaRecomm.images[0]" alt="" />
      <div class="AkapelaRecomm-right">
        <p>{{ AkapelaRecomm.title }}</p>
        <p>{{ AkapelaRecomm.subtitle }}</p>
        <span>{{ AkapelaRecomm.recommend_tag }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "AkapelaRecomm",
  props: ["AkapelaRecomm"],
};
</script>

<style lang="scss" scoped>
#AkapelaRecomm {
  .AkapelaRecomm-content {
    height: 7.5rem;
    background-color: white;
    box-shadow: var(--boxsizi);
    padding: 0.625rem;
    margin-top: 0.625rem;
    display: flex;
    align-items: center;
    img {
      width: 4.6875rem;
      height: 6.25rem;
    }
    .AkapelaRecomm-right {
      height: 6.25rem;
      margin-left: 0.625rem;
      p {
        line-height: 1.125rem;
      }
      p:nth-child(1) {
        font-size: 0.875rem;
        // margin-bottom: 0.3125rem;
      }
      p:nth-child(2) {
        color: var(--fontcolor);
        font-size: 0.75rem;
        margin-bottom: 0.625rem;
      }
      span {
        font-size: 0.75rem;
        padding: 0.125rem;
        color: #cfbd8d;
        background-color: #f5f2e8;
      }
    }
  }
}
</style>